<template>
  <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
    <n-grid-item span="0:24 640:24 1024:8">
      <n-card title="时间线" :bordered="false" class="h-full rd-8 shadow-sm">
        <n-timeline>
          <n-timeline-item
            v-for="item in timelines"
            :key="item.type"
            v-bind="item"
          />
        </n-timeline>
      </n-card>
    </n-grid-item>
    <n-grid-item span="0:24 640:24 1024:16">
      <n-card title="表格" :bordered="false" class="h-full rd-8 shadow-sm">
        <n-data-table size="small" :columns="columns" :data="tableData" />
      </n-card>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang="tsx">
import { NTag } from "naive-ui";

interface TimelineData {
  type: "default" | "info" | "success" | "warning" | "error";
  title: string;
  content: string;
  time: string;
}

interface TableData {
  key: number;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const timelines: TimelineData[] = [
  { type: "default", title: "啊", content: "", time: "2021-10-10 20:46" },
  {
    type: "success",
    title: "成功",
    content: "哪里成功",
    time: "2021-10-10 20:46",
  },
  {
    type: "error",
    title: "错误",
    content: "哪里错误",
    time: "2021-10-10 20:46",
  },
  {
    type: "warning",
    title: "警告",
    content: "哪里警告",
    time: "2021-10-10 20:46",
  },
  { type: "info", title: "信息", content: "是的", time: "2021-10-10 20:46" },
];

const columns = [
  {
    title: "Name",
    key: "name",
  },
  {
    title: "Age",
    key: "age",
  },
  {
    title: "Address",
    key: "address",
  },
  {
    title: "Tags",
    key: "tags",
    render(row: TableData) {
      return row.tags.map((tagKey) => {
        return (
          <NTag class="mr-6" type="info">
            {tagKey}
          </NTag>
        );
      });
    },
  },
];

const tableData: TableData[] = [
  {
    key: 0,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: 1,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["wow"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 3,
    name: "Soybean",
    age: 25,
    address: "China Shenzhen",
    tags: ["handsome", "programmer"],
  },
  {
    key: 4,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: 5,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["wow"],
  },
  {
    key: 6,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];
</script>

<style scoped></style>
